<template>
    <div>
        <h1 style="color: aquamarine;">显示列表</h1>

            <select v-model="p.typeid">
                <option value="0">请选择</option>
                <option v-for="item in typelsit" :value="item.id">{{ item.typeName }}</option>
            </select>
            <input type="button" value="查询" @click="queryData">

        <input type="button" value="新增房号" @click="Add">

        <table class="table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" @change="ck_change" v-model="ck">
                        
                    </td>
                    <td>编号</td>
                    <td>房间类型</td>
                    <td>房号</td>
                    <td>备注</td>
                    <td>创建时间</td>
                    <td>修改时间</td>
                    <td>是否删除</td>
                    <td>是否启用</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in data">
                    <td>
                        <input v-model="idarray" type="checkbox" :value="item.hI_Id" >
                    </td>
                    <td>{{ item.hI_Id }} </td>
                    <td>{{ item.typeName }} </td>
                    <td>{{ item.houseNo }} </td>
                    <td>{{ item.remark }} </td>
                    <td>{{ item.createDate .substring(0,10)}} </td>
                    <td>{{ item.updateDate .substring(0,10)}} </td>
                    <td :style=" 'color:'+ (item.isDelete?'green':'red')+';' ">{{ item.isDelete?"是":"否" }} </td>
                    <td :style=" 'color:'+ (item.isActive?'green':'red')+';' ">{{ item.isActive?"启用":"禁用"  }} </td>
                    <td>
                        <img src="" alt="">
                    </td>
                    <td>
                        <input v-if="!item.isActive" type="button" value="启用" @click="SetIsAction(item.hI_Id,true)">
                        <input v-else type="button" value="禁用" @click="SetIsAction(item.hI_Id,false)">
                    </td>
                    <td>
                        <input type="button" value="删除" @click='IsDelete(item.hI_Id)'>
                    </td>
                    <td>
                        <input type="button" value="详情" @click="ShowInfo(item.hI_Id)">
                        <input type="button" value="编辑" @click="EditerInfo(item.hI_Id)">
                    </td>
                </tr>
            </tbody>
        </table>

        共 <span style="color: red;"> {{ p.pcount }} </span> 页/当前第 <span style="color: red;">{{ p.index }}</span>  页，共 <span style="color: red;">{{ p.pcount }}</span>  行/当前第 <span style="color: red;">{{ p.size }}</span>  行

        <br>

        <a href="#" @click="Page(1)">首页</a>|
        <a href="#" @click="Page(2)">上一页</a>|
        <a href="#" @click="Page(3)">下一页</a>|
        <a href="#" @click="Page(4)">尾页</a>

        <select @change="SizeChange" v-model="p.size">
            <option value="3">3</option>
            <option value="6">6</option>
            <option value="9">9</option>
        </select>

        <input type="text" v-model="p.index">
        <input type="button" value="确认" @click="IndexChange">
        <input type="button" value="批量逻辑删除" @click="logicdeleteall">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router= useRouter();
const route= useRoute();

const ck=ref(false)
const idarray=ref([0])

onMounted(()=>{
    GetShow();
    GetHousetypelsit(); 
})

//全选变化时
const ck_change=()=>{
    if(ck.value){
        data.value.forEach(element=>{
            idarray.value.push(element.hI_Id)
        })
    }
    else{
        idarray.value=[];
    }
}

const logicdeleteall=()=>{
    var s=idarray.value.toString();
    
    if(!confirm('确认要删除吗？')){
        return;
    }
    axios.delete("https://localhost:7275/api/HouseNum/DeleteLogic/DeleteLogicAsyncAll",{params:{idstring:s}}).then(res=>{
        if(res.data>0){
            alert('删除成功')
            GetShow();
        }
        else{
            alert('删除失败')
        }
    })

}

const queryData=()=>{
    p.value.index=1;
    GetShow();
}

const typelsit=ref([{
    "id": "1",
    "typeName": "标准间",
    "price": 100,
    "number": 3,
    "area": 48,
    "window": true,
    "img": "/pic/1.jpg",
    "photoisDeleted": false,
    "createDate": "2024-02-10T00:00:00",
    "updateDate": "2025-02-10T00:00:00",
    "desc": "好好好",
    "numberCount": 3
  }])

  const GetHousetypelsit=()=>{
    axios.get("https://localhost:7275/api/HouseType/GetHouseType").then(res=>{
        typelsit.value=res.data;
    })
}

//逻辑删除
const IsDelete=(id:any)=>{
    if(!confirm('确认要删除吗？')){
        return;
    }
    axios.delete("https://localhost:7275/api/HouseNum/DeleteLogic",{params:{id:id}}).then(res=>{
        if(res.data>0){
            alert('删除成功')
            GetShow();
        }
        else{
            alert('删除失败')
        }
    })
}

//状态修改“启用、禁用”
const SetIsAction=(id:any,val:any)=>{
    axios.get("https://localhost:7275/api/HouseNum/GetUpdateIsActive",{params:{id:id,val:val}}).then(res=>{
        if(res.data>0){
            alert('状态修改成功')
            GetShow();
        }
        else{
            alert('修改失败')
        }
    })
}

const IndexChange=()=>{
    if( p.value.index<p.value.pcount)
    {
        p.value.index<p.value.pcount;
    }
    if( p.value.index*0!=0)
    {
        p.value.index=1;
    }
    GetShow();
}

const SizeChange=()=>{
    p.value.index=1;
    GetShow();
}

const Page=(v:any)=>{
    if(v==1){
        p.value.index=1;
    }
    if(v==2){
       if( p.value.index>1){
        p.value.index-=1;
       }
    }
    if(v==3){
        if( p.value.index<p.value.pcount){
        p.value.index+=1;
       }
    }
    if(v==4){
        p.value.index=p.value.pcount;
    }
    GetShow();
} 

const data =ref([{
    "houseNo": "3001",
    "updateDate": "2025-02-10T11:16:54.464",
    "createDate": "2025-02-10T11:16:54.464",
    "isDelete": false,
    "hI_Id": 1,
    "houseTypeId": 1,
    "isActive": true,
    "remark": "好好好推理社",
    "typeName": "标准间"
}])

const p=ref({
    index:1,
    size:3,
    typeid:0,
    count:0,
    pcount:0,
})

const GetShow=()=>{
    axios.get("https://localhost:7275/api/HouseNum/GetHouseNumPage",{params:p.value}).then(res=>{
        data.value=res.data.data;

        p.value.count=res.data.count;
        p.value.pcount=Math.ceil(p.value.count/p.value.size);
    })
}

const Add=()=>{
    router.push({path: '/Add'})
}

const ShowInfo=(val:any)=>{
    
    router.push({path:'/GetShow',query:{id:val}}) 
}
const EditerInfo=(val:any)=>
{ router.push({path:'/Edit',query:{id:val}})

}
</script>

<style scoped>

</style>